Cascading Spin List
Description
It is possible to make cascading spin lists using Alpha Anywhere. In this scenario you have two spin-list controls with the selection in the first spin-list control determining the choices that will appear in the second spin-list control.
Creating a Cascading Spin List
Open the UX Builder. In the Data Controls menu select a [Spin List] control to add a spin control to the component. Give the control the name spinCountries
Add a second spin control to the component. Give it the name spinCities
The two added spin list controlsGo to the UX Properties page. Scroll down to the Data Series section and click on the
next to the Data series property.
In the Data Series Definition dialog click the 'Add Data Series' button.
Name the data series 'SeriesCountries' and click OK.
With the SeriesCountries data series highlighted, click the "Edit Series Definition" button.
In the Data Series Builder choose SQL as the Data Source Type.
With SQL set as the Data Source, look at the SQL Data Source properties.
Next to the Connection string property click the
button and
set the connection string to the Northwind database.
Click the
next to the "Table name"" property and set this to 'Customers'
Click the
next to the "Field list"" property and set it to Country
Set the "Order" property to Country.
Check the "Distinct" property checkbox. The SQL Data Source section should now look like this:
Still in the Data Series Builder, find the Arguments section and click the
next to the Arguments property.
Click Insert New Argument. Define an Argument called whatCountry
Set the Value property of the argument to be spinCountries
Click OK and OK again.
Back in the Data Series Definition dialog click 'Add Data Series' to define a second Data Series. Name this data series "SeriesCities"
Highlight the SeriesCities Data Series and click 'Edit Series Definition'
Under Data Source Type select SQL again.
Go to the SQL Data Source section and again select the Northwind database as the 'Connection string'.
Set the Table name property to Customers again.
Set the Field list property to City
For the Filter property put the following
Country =:whatCountry
The Filter propertySet the Order property to "City".
Finally, Check Distinct. The SQL Data Source list for the SeriesCities data source should look like this:
Click OK and OK again to get back to the UX Property page.
Open the UX Controls page. Highlight the spinCountries control, then view the Spin List Properties section of the Properties menu. Find the "Method for defining list" property and change its setting to 'Data Series'.
This will make available the "Data series" mapping property. Click the
box next to the Data series mapping property.
Set the spinCountries control's Display value and Stored value to be "SeriesCountries.Country".
Click OK and OK.
Go back to the UX Controls page. Highlight the spinCities control. Go to the Spin List Properties for this control and change the "Method for defining list" property to 'Data Series' again.
Click the
next to the Data series mapping property.Set spinCities Display value and Stored value to be "SeriesCities.City".
Click OK and OK.
All that is left now is the need to automatically refresh the control. Highlight the spinCountries control and click the
button next to the OnSelect property
In the spinCountries control add this code to the OnSelect property. This will refresh the data series in SeriesCities after a 10 millisecond delay
setTimeout(function() { {dialog.object}.refreshDataSeries('seriesCities')},10);The timeout prevents the refresh from starting before the spinCountries control has obtained the correct value.Now run the component in Live View. Change the country on the top spin-list and the selection of cities on the lower spin-list will update to match the country.
Cities with Canada selected
Cities when France is selected
Cities with Spain selected
Videos
To learn more, check out the videos below:
Spin List Control
The Spin List control is ideal for mobile applications. It is an alternative to a Dropdown control or an Edit-combo textbox. It can be used when the user needs to select from a pre-defined list of values.